<!--故障原因添加-->
<template>
    <div class="vue-ms-main  vue-ms-main-add" v-loading="loading">
        <div class="ms-top">
            <!-- 当前页标题  -->
            <div class="crumbs fl">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i> 设备型号管理</el-breadcrumb-item>
                    <el-breadcrumb-item >设备型号编辑</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!--  添加 -->
        <!--padding: 0px;border-right:none; border-left:none;border-bottom: none; padding-top: 20px;-->
        <div class = "ms-updmain" style="display: flex; ">
            <!--<div style="min-width: 300px; float:left" >-->
            <!--<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
            <!--<div class="info infos" >-->
            <!--&lt;!&ndash;<el-form-item label="故障原因" prop="text" label-width="80px"><i class="xing">*</i>&ndash;&gt;-->
            <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
            <!--<el-form-item label="" prop="text" label-width="0px">-->
            <!--<el-input type="textarea" v-model="ruleForm.text" rows="8" placeholder="请填写故障原因" auto-complete="off"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item >-->
            <!--<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
            <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
            <!--</el-form-item>-->
            <!--</div>-->
            <!--</el-form>-->
            <!--</div>-->
            <div class="fl-list case-list" style="width: 100%; float: right">
                <div class="title">设备型号列表 <el-button style="float: right;" type="primary" plain @click="addCaseBtn">添加设备型号</el-button></div>
                <div v-if="addShowStu">
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <div class="info infos" >
                            <el-form-item label="" prop="name" label-width="0px">
                                <el-input type="text" v-model="ruleForm.name" rows="8" placeholder="请填写故障原因" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="info" :style="listHeight" style="overflow: scroll">
                    <div class="row" v-for="item of listdata">
                        <p>{{item.name}}</p><label><i class="el-icon-circle-close"></i>&nbsp; <i @click="updCaseBtn(item.id,item.name)" class="el-icon-edit"></i></label>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import insurance from '../../api/insurance';
    export default {
        data() {
            var checkProName = (rule, value, callback) => {if (!value) { return callback(new Error('请输入项目名称'));}else{callback(); }};
            return {
                listdata : [],
                addShowStu:false,
                listHeight:{'max-height':document.body.clientHeight-300+'px'},
                isCz:true,
                options: [],
                paramsId:'',
                paramsRouter:'proAll',
                ruleForm: {
                    id:0,
                    name: "",    //项目名称
                },
                // 验证
                rules: {
                    name: [
                        { validator: checkProName, trigger: 'blur' }
                    ],
                },
                loading:false,
            };
        },
        watch: {
            '$route': 'getParams'
        },
        methods: {
            submitForm(formName) {
                var that = this;
                if(that.ruleForm.id != 0){
                    that.listdata[parseInt(that.ruleForm.id)-1].name = that.ruleForm.name;
                }else{
                    that.listdata.push({'name':that.ruleForm.name});
                }
                that.addShowStu = false;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.addLoading = true;
                        let para = Object.assign({}, that.ruleForm);
                        var data = oara
                        $.ajax(insurance.posturl+"proj/StorgeProj",{
                            'data': data,
                            headers: {'Content-Type': 'application/json;charset=UTF-8'},
                            'type': 'POST',
                            success:function (res) {
                                res = JSON.parse(res);
                                that.$router.push({ path: '/'+that.paramsRouter });
                                that.addLoading = false;
                            }
                        });
                        // this.loading = true;
                    } else {
                        this.altopen('请把信息填写完整！','warning');
                        return false;
                    }
                });
            },
            addCaseBtn(){
                this.addShowStu = true;
                this.ruleForm.id = 0;
                this.ruleForm.name = '';
            },
            // 修改
            updCaseBtn(id,name){
                this.addShowStu = true;
                this.ruleForm.id = id;
                this.ruleForm.name = name;
            },
            // 公共弹框
            altopen(msg,type) {
                this.$notify({
                    type:type,
                    message: msg,
                    offset: 100,
                });
            },
        },

        mounted(){
            this.listdata = [{'id':'1','name':'内容1'},{'id':'2','name':'内容2'},{'id':'3','name':'内容3'}];
        }
    }
</script>
<style>
    /*  设备故障原因列表   开始*/
    .case-list{ margin-left: 40px; border:rgb(214, 226, 247) 1px solid;}
    .case-list .title{background:rgb(238, 246, 246); height: 40px; line-height: 40px; padding-left: 20px;}
    .case-list .info{padding: 10px;}
    .case-list .info .row{display: flex;justify-content:space-between; padding: 6px;color: rgb(72, 106, 106);}
    .case-list .info .row:hover{background: rgb(238, 246, 246);}
    .case-list .info .row label{min-width: 36px;align-self: center;}
    /*  设备故障原因列表   结束*/
    .el-form-item__content{position: relative};
    .xing{color: red; font-size: 20px; position: absolute;left: -75px; top: 7px;}
    .img-upd-div{height: 134px; width: 225px; float:left; overflow: hidden;border: #ccc 1px solid;margin-bottom: 5px; margin-right: 5px; position: relative}
    .img-upd-div .el-form-item__error{ position: absolute; bottom: 0px;  text-align: center; left: 0px; width: 100%;}
    .image-list2 .img-uplod{
        position: absolute;
        z-index: 999;
        background: transparent;
        top: -24px;
        width: 100%;
        height: 160px !important;
        color: #fff;
    }

</style>
